<template>
    <el-container class="h-full">
      <el-header class="navbar">
        <div class="navbar-wrapper flex items-center text-2xl">
            JS Docs
        </div>
      </el-header>
      <el-container>
        <el-aside>
            <el-scrollbar class="sidebar">
                <div class="sidebar-groups">
                    <section class="sidebar-group">
                        <template v-for="item in router">
                            <p class="sidebar-group__title">{{ item.name }}</p>
                            <router-link class="link" :to="subItem.path" v-for="subItem in item.children" @click="menuEvent(subItem)" :class="subItem.name == store.menu ? 'active' : ''">
                                <p class="link-text">{{ subItem.name }}</p>
                            </router-link>
                        </template>
                        
                        
                    </section>
                </div>
            </el-scrollbar>
        </el-aside>
        <el-main>
            <RouterView />
        </el-main>
      </el-container>
    </el-container>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from './stores/user'

export default defineComponent({
    setup () {

        const store = useStore()

        const router = useRouter().options.routes;
        console.log('useRouter()',useRouter().options.routes);

        const menuEvent = (item: any) => {
            store.menuActive(item.name)
        }

        return {
            router,
            menuEvent,
            store,
        }
    }
})
</script>

<style lang="scss" scoped>
.el-header{
    padding: 0;
    height: var(--header-height);
}

.navbar{
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    z-index: var(--nav-z-index);
}

.navbar-wrapper{
    position: relative;
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
    padding: 0 12px 0 24px;
    background-image: radial-gradient(transparent 1px,var(--bg-color) 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    -webkit-backdrop-filter: saturate(50%) blur(4px);
    top: 0;
}

.sidebar-groups {
    padding: 0 0 5rem;

    .sidebar-group__title {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 8px;
        line-height: 24px;
    }
}

.link {
    padding: 10px 16px;
    line-height: 1.5;
    font-size: .9rem;
    border-radius: 8px;

    .link-text{
        margin: 0;
    }
}

.link:not(.flex) {
    display: block;
}

.link-text {
    line-height: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color-light);
    transition: color .5s;
}

.link:hover .link-text {
    color: var(--brand-color);
    transition: color .25s;
}

.link.active {
    background-color: var(--link-active-bg-color);

    .link-text {
        font-weight: 600;
        color: var(--brand-color);
        transition: color .25s;
    }
}

.sidebar {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: 300px;
    z-index: var(--sidebar-z-index);
    background-color: var(--bg-color);
    padding: 48px 32px 0;
    overflow-y: auto;
}
</style>